<template>
	<div class="TimeRulePopups">
		<div class="mask">
			<div class="fixedBox">
				<div class="content">
					<div class="top">
						<h3 class="title">时间规则</h3>
						<div
							class="close"
							@click="close"
						>
							<i class="iconfont iconguanbi-01"></i>
						</div>
					</div>
					<div class="main">
						<div class="ruleBox">
							<ul class="weekBox">
								<li
									v-for="(item,index) in week"
									:key="index"
								>
									<Button
										:type="item.status === true ? 'info':'default'"
										@click="activeWeek(item.id)"
									>{{item.text}}</Button>
								</li>
							</ul>
							<ul class="timePickerBox">
								<li>
									<ul>
										<li>
											<p>学生到校统计时间</p>
										</li>
										<li>
											<p>到校时间</p>
											<TimePicker
												type="timerange"
												confirm
												placeholder="请选择时间"
												:value="[timeRuleData[currentWeek].studentArriveTime.startTime,timeRuleData[currentWeek].studentArriveTime.endTime]"
												@on-change="studentArriveTimeChange"
											></TimePicker>
										</li>
										<li>
											<p>班审报表自动发送</p>
											<TimePicker
												type="time"
												confirm
												placeholder="请选择时间"
												v-model="timeRuleData[currentWeek].studentArriveTime.classesSendTime"
											></TimePicker>
										</li>
										<li>
											<p>校审报表自动发送</p>
											<TimePicker
												type="time"
												confirm
												placeholder="请选择时间"
												v-model="timeRuleData[currentWeek].studentArriveTime.schoolSendTime"
											></TimePicker>
										</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>
											<p>学生离校统计时间</p>
										</li>
										<li>
											<p>离校时间</p>
											<TimePicker
												type="timerange"
												confirm
												placeholder="请选择时间"
												:value="[timeRuleData[currentWeek].studentLeaveTime.startTime,timeRuleData[currentWeek].studentLeaveTime.endTime]"
												@on-change="studentLeaveTimeChange"
											></TimePicker>
										</li>
										<li>
											<p>班审报表自动发送</p>
											<TimePicker
												type="time"
												confirm
												placeholder="请选择时间"
												v-model="timeRuleData[currentWeek].studentLeaveTime.classesSendTime"
											></TimePicker>
										</li>
										<li>
											<p>校审报表自动发送</p>
											<TimePicker
												type="time"
												confirm
												placeholder="请选择时间"
												v-model="timeRuleData[currentWeek].studentLeaveTime.schoolSendTime"
											></TimePicker>
										</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>
											<p>学生上学时间设置</p>
										</li>
										<li
											v-for="(item,index) in timeRuleData[currentWeek].studentWorkTimes"
											:key="index"
										>
											<p>课间时间</p>
											<TimePicker
												type="timerange"
												confirm
												placeholder="请选择时间"
												:value="[item.startTime || '',item.endTime || '']"
												@on-change="studentWorkTimesChange($event,index)"
											></TimePicker>
										</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>
											<p>教师到校统计时间</p>
										</li>
										<li>
											<p>到校时间</p>
											<TimePicker
												type="timerange"
												confirm
												placeholder="请选择时间"
												:value="[timeRuleData[currentWeek].teacherArriveTime.startTime,timeRuleData[currentWeek].teacherArriveTime.endTime]"
												@on-change="teacherArriveTimeChange"
											></TimePicker>
										</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>
											<p>教师离校统计时间</p>
										</li>
										<li>
											<p>离校时间</p>
											<TimePicker
												type="timerange"
												confirm
												placeholder="请选择时间"
												:value="[timeRuleData[currentWeek].teacherLeaveTime.startTime,timeRuleData[currentWeek].teacherLeaveTime.endTime]"
												@on-change="teacherLeaveTimeChange"
											></TimePicker>
										</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>
											<p>教师上班时间设置</p>
										</li>
										<li
											v-for="(item,index) in timeRuleData[currentWeek].teacherWorkTimes"
											:key="index"
										>
											<p>课间时间</p>
											<TimePicker
												type="timerange"
												confirm
												placeholder="请选择时间"
												:value="[item.startTime || '',item.endTime || '']"
												@on-change="teacherWorkTimesChange($event,index)"
											></TimePicker>
										</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>
											<p>执勤校长设置</p>
										</li>
										<li>
											<p>执勤校长</p>
											<Select
												v-model="timeRuleData[currentWeek].principalIds"
												multiple
												:max-tag-count="1"
											>
												<Option
													v-for="item in principalList"
													:value="item.id"
													:key="item.id"
												>{{ item.username }}</Option>
											</Select>
										</li>
									</ul>
								</li>
							</ul>
							<div class="checkboxGroupBox">
								<CheckboxGroup
									v-model="checkWeeks"
									@on-change="checkAllGroupChange"
								>
									<Checkbox
										:label="item.id"
										v-for="(item,index) in checkboxWeek"
										:key="index"
									>
										<span>{{item.text}}</span>
									</Checkbox>
								</CheckboxGroup>
								<Checkbox
									:indeterminate="indeterminate"
									:value="checkAll"
									@click.prevent.native="handleCheckAll"
								>全选</Checkbox>
								<Button
									class="popupsCancelBtn"
									@click="copy"
								>复制</Button>
							</div>
						</div>
					</div>
					<div class="bottom">
						<Button
							class="popupsCancelBtn"
							@click="close"
						>取消</Button>
						<Button
							type="info"
							class="popupsConfirmBtn"
							@click="confirm"
						>确定</Button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: "TimeRulePopups",
	props: ["weekRuleData"],
	computed: {
		checkWeeks: {
			get () {
				return this.tempCheckWeeks;
			},
			set (val) {
				this.tempCheckWeeks = val;
			},
		},
	},
	data () {
		return {
			week: [
				{
					text: "星期日",
					status: true,
					id: 0,
				},
				{
					text: "星期一",
					status: false,
					id: 1,
				},
				{
					text: "星期二",
					status: false,
					id: 2,
				},
				{
					text: "星期三",
					status: false,
					id: 3,
				},
				{
					text: "星期四",
					status: false,
					id: 4,
				},
				{
					text: "星期五",
					status: false,
					id: 5,
				},
				{
					text: "星期六",
					status: false,
					id: 6,
				},
			], // 星期数据
			checkboxWeek: [
				{
					text: "星期日",
					status: true,
					id: 0,
				},
				{
					text: "星期一",
					status: false,
					id: 1,
				},
				{
					text: "星期二",
					status: false,
					id: 2,
				},
				{
					text: "星期三",
					status: false,
					id: 3,
				},
				{
					text: "星期四",
					status: false,
					id: 4,
				},
				{
					text: "星期五",
					status: false,
					id: 5,
				},
				{
					text: "星期六",
					status: false,
					id: 6,
				},
			], // 多选星期数据
			principalList: [], // 执勤校长数据
			tempCheckWeeks: [], // 多选 选中的值
			indeterminate: true, // 多选 全选 参数
			checkAll: false, // 多选 全选 参数
			// 每天考勤时间段数据
			timeRuleData: [
				{
					principalIds: [], // 选中的执勤校长数据
					studentArriveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentLeaveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
					teacherArriveTime: {
						startTime: "",
						endTime: "",
					},
					teacherLeaveTime: {
						startTime: "",
						endTime: "",
					},
					teacherWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
				},
				{
					principalIds: [], // 选中的执勤校长数据
					studentArriveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentLeaveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
					teacherArriveTime: {
						startTime: "",
						endTime: "",
					},
					teacherLeaveTime: {
						startTime: "",
						endTime: "",
					},
					teacherWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
				},
				{
					principalIds: [], // 选中的执勤校长数据
					studentArriveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentLeaveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
					teacherArriveTime: {
						startTime: "",
						endTime: "",
					},
					teacherLeaveTime: {
						startTime: "",
						endTime: "",
					},
					teacherWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
				},
				{
					principalIds: [], // 选中的执勤校长数据
					studentArriveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentLeaveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
					teacherArriveTime: {
						startTime: "",
						endTime: "",
					},
					teacherLeaveTime: {
						startTime: "",
						endTime: "",
					},
					teacherWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
				},
				{
					principalIds: [], // 选中的执勤校长数据
					studentArriveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentLeaveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
					teacherArriveTime: {
						startTime: "",
						endTime: "",
					},
					teacherLeaveTime: {
						startTime: "",
						endTime: "",
					},
					teacherWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
				},
				{
					principalIds: [], // 选中的执勤校长数据
					studentArriveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentLeaveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
					teacherArriveTime: {
						startTime: "",
						endTime: "",
					},
					teacherLeaveTime: {
						startTime: "",
						endTime: "",
					},
					teacherWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
				},
				{
					principalIds: [], // 选中的执勤校长数据
					studentArriveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentLeaveTime: {
						startTime: "",
						endTime: "",
						classesSendTime: "",
						schoolSendTime: "",
					},
					studentWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
					teacherArriveTime: {
						startTime: "",
						endTime: "",
					},
					teacherLeaveTime: {
						startTime: "",
						endTime: "",
					},
					teacherWorkTimes: [
						{
							startTime: "",
							endTime: "",
						},
					],
				},
			],
			// 每天考勤时间段空数据
			timeRuleNullData: {
				principalIds: [], // 选中的执勤校长数据
				studentArriveTime: {
					startTime: "",
					endTime: "",
					classesSendTime: "",
					schoolSendTime: "",
				},
				studentLeaveTime: {
					startTime: "",
					endTime: "",
					classesSendTime: "",
					schoolSendTime: "",
				},
				studentWorkTimes: [
					{
						startTime: "",
						endTime: "",
					},
				],
				teacherArriveTime: {
					startTime: "",
					endTime: "",
				},
				teacherLeaveTime: {
					startTime: "",
					endTime: "",
				},
				teacherWorkTimes: [
					{
						startTime: "",
						endTime: "",
					},
				],
			},
			currentWeek: 0, // 当前选中星期
		};
	},
	mounted () {
		this.checkboxWeek.forEach((item, index) => {
			if (item.status === true) {
				this.tempCheckWeeks.push(item.id);
			}
		});
		this.getPrincipalData();
		this.getTimeRuleData();
	},
	methods: {
		// 复制
		copy () {
			this.tempCheckWeeks.forEach((item, index) => {
				this.timeRuleData[item] = this.timeRuleData[this.currentWeek];
			});
		},
		// 教师上班时间改变
		teacherWorkTimesChange (value, index) {
			this.timeRuleData[this.currentWeek].teacherWorkTimes[index].startTime =
				value[0];
			this.timeRuleData[this.currentWeek].teacherWorkTimes[index].endTime =
				value[1];
		},
		// 教师离校时间改变
		teacherLeaveTimeChange (value) {
			this.timeRuleData[this.currentWeek].teacherLeaveTime.startTime = value[0];
			this.timeRuleData[this.currentWeek].teacherLeaveTime.endTime = value[1];
		},
		// 教师到校时间改变
		teacherArriveTimeChange (value) {
			this.timeRuleData[this.currentWeek].teacherArriveTime.startTime =
				value[0];
			this.timeRuleData[this.currentWeek].teacherArriveTime.endTime = value[1];
		},
		// 学生上学时间改变
		studentWorkTimesChange (value, index) {
			this.timeRuleData[this.currentWeek].studentWorkTimes[index].startTime =
				value[0];
			this.timeRuleData[this.currentWeek].studentWorkTimes[index].endTime =
				value[1];
		},
		// 学生离校时间改变
		studentLeaveTimeChange (value) {
			this.timeRuleData[this.currentWeek].studentLeaveTime.startTime = value[0];
			this.timeRuleData[this.currentWeek].studentLeaveTime.endTime = value[1];
		},
		// 学生到校时间改变
		studentArriveTimeChange (value) {
			this.timeRuleData[this.currentWeek].studentArriveTime.startTime =
				value[0];
			this.timeRuleData[this.currentWeek].studentArriveTime.endTime = value[1];
		},
		// 获取每天考勤时间段
		getTimeRuleData () {
			this.$store.dispatch("home/GetTimeRuleData", {}).then((res) => {
				if (res.statusCode === 200) {
					if (res.data) {
						for (let key in res.data) {
							if (res.data[key]) {
								this.timeRuleData[key] = res.data[key];
							}
						}
					}
				}
			});
		},
		// 多选 全选
		handleCheckAll () {
			if (this.indeterminate) {
				this.checkAll = false;
			} else {
				this.checkAll = !this.checkAll;
			}
			this.indeterminate = false;

			if (this.checkAll) {
				this.tempCheckWeeks = [0, 1, 2, 3, 4, 5, 6];
			} else {
				this.tempCheckWeeks = [];
			}
		},
		// 多选
		checkAllGroupChange (data) {
			if (data.length === 7) {
				this.indeterminate = false;
				this.checkAll = true;
			} else if (data.length > 0) {
				this.indeterminate = true;
				this.checkAll = false;
			} else {
				this.indeterminate = false;
				this.checkAll = false;
			}
		},
		// 获取执勤校长数据
		getPrincipalData () {
			this.$store.dispatch("home/GetPrincipalData", {}).then((res) => {
				if (res.statusCode === 200) {
					this.principalList = res.data.peoples || [];
				}
			});
		},
		// 点击切换星期
		activeWeek (id) {
			this.currentWeek = id;
			this.tempCheckWeeks = [id];
			this.checkAllGroupChange(this.tempCheckWeeks);
			this.week.forEach((item, index) => {
				item.status = false;
				if (item.id === id) {
					item.status = true;
				}
			});
		},
		// 确定
		confirm () {
			let obj = [];
			for (let key in this.timeRuleData) {
				obj.push({ week_id: parseInt(key), data: this.timeRuleData[key] });
			}
			this.$store.dispatch("home/PostSubmiTimeRule", obj).then((res) => {
				if (res.statusCode === 200) {
					this.$Message.success("设置成功");
					this.$emit("confirmTimeRulePopups");
				} else {
					this.$Message.error("设置失败");
				}
			});
		},
		// 关闭弹窗
		close () {
			this.$emit("closeTimeRulePopups");
		},
	},
};
</script>
<style lang="scss" scoped>
.TimeRulePopups {
	position: relative;
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background-color: rgba($color: #000000, $alpha: 0.5);
		.fixedBox {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 1260px;
			height: 800px;
			background-color: #fff;
			.content {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				.top {
					background-color: #f2f2f2;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 48px;
					h3 {
						color: #333;
						font-size: 16px;
						text-indent: 20px;
						font-weight: normal;
					}
					.close {
						width: 64px;
						height: 48px;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						i {
							color: #333;
							font-size: 24px;
						}
					}
					.close:hover {
						background-color: $red;
						i {
							color: #fff;
						}
					}
				}
				.main {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					.ruleBox {
						.weekBox {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							li {
								margin-right: 5px;
							}
						}
						.timePickerBox {
							display: flex;
							align-items: flex-start;
							flex-direction: column;
							flex-wrap: wrap;
							width: 1180px;
							height: 586px;
							margin-top: 10px;
							> li {
								margin-bottom: 20px;
								> ul {
									> li {
										background-color: #ccc;
										display: flex;
										align-items: center;
										justify-content: flex-start;
										width: 570px;
										margin-bottom: 1px;
										padding-left: 24px;
										p {
											width: 120px;
											line-height: 46px;
											font-size: 14px;
											color: #333;
											margin-right: 20px;
										}
										.ivu-select {
											width: 211px;
										}
									}
								}
							}
						}
						.checkboxGroupBox {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
					}
				}
				.bottom {
					height: 48px;
					background-color: #f2f2f2;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}
}
</style>
